<template>
  <div class="view-page monitor-server">
    <row :gutter="[32, 32]">
      <Col :span="12">
        <Card :bordered="false">
          <Descriptions :column="1" bordered size="middle">
            <template #title>
              <Space><LaptopOutlined />CPU</Space>
            </template>
            <DescriptionsItem label="核心数">
              {{ server?.cpu?.cpuNum }}
            </DescriptionsItem>
            <DescriptionsItem label="用户使用率">
              {{ server?.cpu?.used || '0' }}%
            </DescriptionsItem>
            <DescriptionsItem label="系统使用率">
              {{ server?.cpu?.sys || '0' }}%
            </DescriptionsItem>
            <DescriptionsItem label="当前空闲率">
              {{ server?.cpu?.free || '0' }}%
            </DescriptionsItem>
          </Descriptions>
        </Card>
      </Col>
      <Col :span="12">
        <Card :bordered="false">
          <Descriptions :column="2" bordered size="middle">
            <template #title>
              <Space><ProfileOutlined />内存</Space>
            </template>
            <DescriptionsItem label="系统总内存">
              {{ server?.mem?.total || '0' }}G
            </DescriptionsItem>
            <DescriptionsItem label="JVM总内存">
              {{ server?.jvm?.total || '0' }}M
            </DescriptionsItem>
            <DescriptionsItem label="系统已用内存">
              {{ server?.mem?.used || '0' }}G
            </DescriptionsItem>
            <DescriptionsItem label="JVM已用内存">
              {{ server?.jvm?.used || '0' }}M
            </DescriptionsItem>
            <DescriptionsItem label="系统剩余内存">
              {{ server?.mem?.free || '0' }}G
            </DescriptionsItem>
            <DescriptionsItem label="JVM剩余内存">
              {{ server?.jvm?.free || '0' }}M
            </DescriptionsItem>
            <DescriptionsItem
              label="系统内存使用率"
              :content-style="{
                color:
                  server?.mem?.usage > 80 ? 'var(--color-danger)' : 'inherit',
              }"
            >
              {{ server?.mem?.usage || '0' }}%
            </DescriptionsItem>
            <DescriptionsItem
              label="JVM内存使用率"
              :content-style="{
                color:
                  server?.jvm?.usage > 80 ? 'var(--color-danger)' : 'inherit',
              }"
            >
              {{ server?.jvm?.usage || '0' }}%
            </DescriptionsItem>
          </Descriptions>
        </Card>
      </Col>
      <Col :span="24">
        <Card :bordered="false">
          <Descriptions :column="2" bordered>
            <template #title>
              <Space><DesktopOutlined />服务器信息</Space>
            </template>
            <DescriptionsItem label="服务器名称">
              {{ server?.sys?.computerName }}
            </DescriptionsItem>
            <DescriptionsItem label="操作系统">
              {{ server?.sys?.osName }}
            </DescriptionsItem>
            <DescriptionsItem label="服务器IP">
              {{ server?.sys?.computerIp }}
            </DescriptionsItem>
            <DescriptionsItem label="系统架构">
              {{ server?.sys?.osArch }}
            </DescriptionsItem>
          </Descriptions>
        </Card>
      </Col>
      <Col :span="24">
        <Card :bordered="false">
          <Descriptions :column="2" bordered>
            <template #title>
              <Space><CoffeeOutlined />Java虚拟机信息</Space>
            </template>
            <DescriptionsItem label="Java名称">
              {{ server?.jvm?.name }}
            </DescriptionsItem>
            <DescriptionsItem label="Java版本">
              {{ server?.jvm?.version }}
            </DescriptionsItem>
            <DescriptionsItem label="启动时间">
              {{ server?.jvm?.startTime }}
            </DescriptionsItem>
            <DescriptionsItem label="运行时长">
              {{ server?.jvm?.runTime }}
            </DescriptionsItem>
            <DescriptionsItem label="安装路径">
              {{ server?.jvm?.home }}
            </DescriptionsItem>
            <DescriptionsItem label="项目路径">
              {{ server?.sys?.userDir }}
            </DescriptionsItem>
            <DescriptionsItem label="运行参数">
              {{ server?.jvm?.inputArgs }}
            </DescriptionsItem>
          </Descriptions>
        </Card>
      </Col>
      <Col :span="24">
        <Card :bordered="false" style="height: 500px">
          <Space><SettingOutlined />磁盘状态</Space>
          <ProTable
            ref="tableRef"
            :fetchListApi="_getServer"
            :columns="columns"
            hide-search
            hide-pagination
            hide-table-options
            row-key="dirName"
          ></ProTable>
        </Card>
      </Col>
    </row>
  </div>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { WithPermission } from '@/permission';
import {
  CoffeeOutlined,
  DesktopOutlined,
  LaptopOutlined,
  ProfileOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue';
import {
  Card,
  Col,
  Descriptions,
  DescriptionsItem,
  Row,
  Space,
} from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { getServer } from '@/api/monitor';

const tableRef = ref();
const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '盘符路径',
    dataIndex: 'dirName',
  },
  {
    title: '文件系统',
    dataIndex: 'sysTypeName',
  },

  {
    title: '盘符类型',
    dataIndex: 'typeName',
  },

  {
    title: '总大小',
    dataIndex: 'total',
  },
  {
    title: '可用大小',
    dataIndex: 'free',
  },
  {
    title: '已用大小',
    dataIndex: 'used',
  },
  {
    title: '已用百分比',
    dataIndex: 'usage',
    customRender: ({ text, record }) => {
      return (
        <span class={record.usage > 80 ? 'text-danger' : ''}>{text}%</span>
      );
    },
  },
]);
const server = ref();
const _getServer = async (params: any) => {
  const res = await getServer();
  server.value = res.data;
  return { ...res, rows: res.data.sysFiles };
};
</script>
